<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon.png">
	<title>scrollpicker-date</title>
	<link rel="stylesheet" href="../scripts/lib/seedsui/seedsui.min.css">
</head>

<body ontouchstart="">
	<header>
		<div class="titlebar">
	        <a class="titlebar-button" href="javascript:back()">
	            <i class="icon icon-arrowleft"></i>
	        </a>
	        <h1 class="titlebar-title">日期选择器</h1>
	    </div>
	</header>
	<article>
        <div class="group" style="padding: 0 12px;">
            <div class="inputbox underline">
                <input type="text" class="input-text SID-DateTime" placeholder="请选择日期时间" readonly="readonly"/>
                <i class="color-placeholder icon icon-calendar"></i>
            </div>
            <div class="inputbox underline">
                <input type="text" class="input-text SID-Date" placeholder="请选择日期" readonly="readonly"/>
                <i class="color-placeholder icon icon-calendar"></i>
            </div>
            <div class="inputbox underline">
                <input type="text" class="input-text SID-Time" placeholder="请选择时间" readonly="readonly"/>
                <i class="color-placeholder icon icon-time"></i>
            </div>
        </div>
	</article>
	<!--SeedsUI-->
    <script src="../scripts/lib/seedsui/seedsui.min.js"></script>
    <!--Exmobi能力-->
    <!--<script src="../scripts/lib/exmobi/exmobi.js"></script>-->
    <script type="text/javascript">
    var view={
        /*=========================
          Model
          ===========================*/
        initialize:function(){
            /*Data*/

            /*DOM*/
            this.textDate=document.querySelector(".SID-Date");
            this.textTime=document.querySelector(".SID-Time");
            this.textDateTime=document.querySelector(".SID-DateTime");

            /*Plugin*/
            this.spDate,this.spTime,this.spDateTime;
            //定义5分钟间隔的分钟数据
            this.minutesData=[];
            this.minuteInterval=5;
            for(var minute=0;minute<60;minute=minute+this.minuteInterval){
                //if(minute<10)minute="0"+minute;
                var tempMinute=minute<10?"0"+minute:minute;
                this.minutesData.push({"key":tempMinute,"value":tempMinute+"分","flag":"time"});
            }

            /*Render*/
            this.render();
            
            /*Events*/
            this._attach();
        },
        render:function(){
        },
        /*=========================
          Plugin
          ===========================*/
        _newSpDate:function(defaultYMD){
            var self=this;
            this.spDate=new SpDate({
                viewType:"date",
                yearClass:"text-center",
                monthClass:"text-center",
                dayClass:"text-center",
                onClickDone:function(e){
                    self.textDate.value=e.activeText;
                    e.scrollpicker.hide();
                },
                onShowed:function(e){
                    //e.setIsClickMaskHide(true);
                },
                onHid:function(e){
                    e.scrollpicker.destroy();
                }
            });
            if(defaultYMD && defaultYMD.length>0){
                this.spDate.setDefaultYear(defaultYMD[0]);
                this.spDate.setDefaultMonth(defaultYMD[1]);
                this.spDate.setDefaultDay(defaultYMD[2]);
                this.spDate.update();
            }
        },
        _newSpTime:function(defaultHS){
            var self=this;
            this.spTime=new SpDate({
                viewType:"time",
                hourClass:"text-center",
                minuteClass:"text-center",
                onClickDone:function(e){
                    self.textTime.value=e.activeText;
                    e.scrollpicker.hide();
                },
                onShowed:function(e){
                    //e.setIsClickMaskHide(true);
                },
                onHid:function(e){
                    e.scrollpicker.destroy();
                }
            });
            if(defaultHS && defaultHS.length>0){
                this.spTime.setDefaultHour(defaultHS[0]);
                this.spTime.setDefaultMinute(defaultHS[1]);
                this.spTime.update();
            }
        },
        _newSpDateTime:function(defaults){
            var self=this;
            this.spDateTime=new SpDate({
                viewType:"datetime",
                isSimpleYear:true,
                minYear:new Date().getFullYear()-5,
                maxYear:new Date().getFullYear()+5,
                yearClass:"text-center",
                monthClass:"text-center",
                dayClass:"text-center",
                hourClass:"text-center",
                minuteClass:"text-center",
                minutesData:self.minutesData,
                onClickDone:function(e){
                    self.textDateTime.value=e.activeText;
                    e.scrollpicker.hide();
                },
                onShowed:function(e){
                    //e.setIsClickMaskHide(true);
                },
                onHid:function(e){
                    e.scrollpicker.destroy();
                }
            });
            if(defaults && defaults.length>0){
                this.spDateTime.setDefaultYear(defaults[0]);
                this.spDateTime.setDefaultMonth(defaults[1]);
                this.spDateTime.setDefaultDay(defaults[2]);
                this.spDateTime.setDefaultHour(defaults[3]);
                this.spDateTime.setDefaultMinute(defaults[4]);
                this.spDateTime.update();
            }
        },
        /*=========================
          Events
          ===========================*/
        _attach:function(e){
            var self=this;
            this.textDate.onclick=function(e){
                self._onClickTextDate(e);
            }
            this.textTime.onclick=function(e){
                self._onClickTextTime(e);
            }
            this.textDateTime.onclick=function(e){
                self._onClickTextDateTime(e);
            }
        },
        /*=========================
          Event Handler
          ===========================*/
        _onClickTextDate:function(e){
            var self=this;
            var defaultYMD=[];
            if(this.textDate.value!=""){
                defaultYMD=this.textDate.value.split("-");
            }
            this._newSpDate(defaultYMD);
            setTimeout(function(){
                self.spDate.scrollpicker.show();
            },10);
        },
        _onClickTextTime:function(e){
            var self=this;
            var defaultHS=[];
            if(this.textTime.value!=""){
                defaultHS=this.textTime.value.split(":");
            }
            this._newSpTime(defaultHS);
            setTimeout(function(){
                self.spTime.scrollpicker.show();;
            },10);
        },
        _onClickTextDateTime:function(e){
            var self=this;
            var defaults=[];
            if(this.textDateTime.value!=""){
                var split=this.textDateTime.value.split(" ");
                var split1=split[0].split("-");
                var split2=split[1].split(":");
                defaults[0]=split1[0];
                defaults[1]=split1[1];
                defaults[2]=split1[2];
                defaults[3]=split2[0];
                defaults[4]=split2[1];
            }
            this._newSpDateTime(defaults);
            //this.spDateTime.show();
            setTimeout(function(){
                self.spDateTime.show();
            },10);
        }
    }

    window.addEventListener("load",function(){
        view.initialize();
    }, false);

	//定义exmobi返回
	function back(){history.go(-1);}
	</script>
</body>
</html>
